<template>
  <view>
    <uni-popup ref="transfer">
      <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认转签" title="待我转交签署人" @confirm="dialogConfirm"
                        @close="dialogClose" :is-mask-click="false" :before-close="true">
        <template v-slot="content">
          <uni-notice-bar text="系统检测到您没有签署权限，请转交有权限的签署人！"/>
          <uni-data-checkbox v-model="radio" :localdata="items" style="margin-bottom: 15rpx;" />
          <view v-if="radio == 1">
            <view class="table-block" :style="staffList.length>=3?'height:400rpx':'height:auto;'">
              <uni-table ref="table" border stripe emptyText="暂无更多数据">
                <uni-tr v-for="(item,index) in staffList" :key="index">
                  <uni-td>
						<view class="flex_between" style="justify-content: flex-start;">
							<checkbox-group @change="sumitSignPerson(item,index,$event)">
							  <checkbox :value="item.id" style="transform:scale(0.7)" color="#00a660" :checked="item.checked" />
							</checkbox-group>
							<view style="margin-left: 26rpx;">
								<view class="">{{ item.deptName }}
								<companyGreen v-if="item.isCertify == 1" class="certiyImg" />
								<companyGray v-else class="certiyImg" />
								</view>
								<view class="flex_between">
								  <view>
								    <span>{{ item.name }}
									<personalGreen v-if="item.isCertify == 1" class="certiyImg" />
									<personalGray v-else class="certiyImg" />
									</span>
								    <span style="margin-left: 12rpx;">{{ item.mobile }}</span>
								  </view>
								  </view>
							 <!-- <span class="themeColor" v-if="selectTrue==index">✔</span>
							  <span class="themeColor" v-else @click="sumitSignPerson(item,index)">使用</span> -->
							</view>
						</view>
                  </uni-td>
                </uni-tr>
              </uni-table>
            </view>
          </view>
          <view class="" v-if="radio == 2">
            <uni-forms ref="valiForm" :rules="rules" :modelValue="form" label-width="240rpx">
              <uni-forms-item label="签署人真实姓名" required name="name">
                <uni-easyinput v-model="form.name" placeholder="请输入签署人真实姓名"/>
              </uni-forms-item>
              <uni-forms-item label="签署人实名号码" required name="mobile">
                <uni-easyinput v-model="form.mobile" placeholder="请输入签署人实名号码" :maxlength="11"/>
              </uni-forms-item>
            </uni-forms>
          </view>
        </template>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import {selectStaffSealAuthPager} from "@/api/ec/console/seal/staffSeal";
import companyGray from "@/components/svg/companyGray";
import companyGreen from "@/components/svg/companyGreen";
import personalGray from "@/components/svg/personalGray";
import personalGreen from "@/components/svg/personalGreen";
export default {
  components: {companyGray,personalGray,personalGreen,companyGreen},
  data() {
    return {
	  showCheck:false,
      staffList: [],
      // 查询参数 
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tableName: undefined,
        tableComment: undefined,
        mobile: undefined,
        params: {
          findApi: undefined
        }
      },
      msgType: 'info',
      title: '',
      radio: 1,
      items: [{
        text: '通过企业内部组织架构转交',
        value: 1
      }, {
        text: '通过签署人姓名、手机号转交',
        value: 2
      }],
      // 校验表单数据
      form: {
        name: null,
        mobile: null,
      },
      // 校验规则
      rules: {
        sealerName: {
          rules: [{
            required: true,
            errorMessage: '请输入签署人真实姓名'
          }]
        },
        sealerMobile: {
          rules: [{
            required: true,
            errorMessage: '请输入签署人实名号码'
          }, {
            format: 'number',
            errorMessage: '签署人实名号码只能输入数字'
          }]
        }
      },
    }
  },
  onLoad() {

  },
  methods: {
    dialogConfirm() {
		if(this.form.mobile == null){
			this.$modal.msgError('请选择转签人');
			return;
		}
		this.form.radio = this.radio
		this.$emit("getSignPerson", this.form);
		this.dialogClose();
    },
    open() {
		this.showCheck = false
      this.$refs.transfer.open('center')
      this.getList()
    },
    dialogClose() {
      this.$refs.transfer.close()
    },
    // 使用签署人
    sumitSignPerson(item,index,e) {
		this.staffList.forEach((data,index1)=>{
			if(data.id == e.detail.value[e.detail.value.length - 1]){
				this.$set(data, 'checked', true);
				this.form = {name: item.name, mobile: item.mobile,isCertify:item.isCertify};
			}else{
				this.$set(data, 'checked', false);
			}
		})
    },
    getList() {
      selectStaffSealAuthPager(this.queryParams).then(res => {
        this.staffList = res.rows;
        // 默认转签人
        // this.form = {sealerName: this.staffList[0].name, sealerMobile: this.staffList[0].mobile};
      })
    },
  }
}
</script>

<style lang="scss" scoped>
	::v-deep .uni-table-checkbox .checkbox__inner.is-checked{
		color: $uni-color-primary;
		background-color: $uni-color-primary;
	}
	::v-deep .uni-table-checkbox .checkbox__inner{
		border-color: $uni-color-primary;
		&:hover{
			border-color: $uni-color-primary;
		}
	}
	::v-deep .uni-table-loading{
		height: 60rpx;
		line-height: 60rpx;
	}
	::v-deep .uni-table-text.empty-border{
		font-size: 26rpx;
	}
	.certiyImg {
		width: 28rpx;
		height: 30rpx;
		display: inline-block;
		margin-left: 2rpx;
		margin-bottom: 8rpx;
		vertical-align:middle;
	}
	.table-block {
	  overflow-y: scroll;
	}
	
	
	::v-deep .uni-popup-dialog {
	  width: 90%;
	}
	
	::v-deep .uni-dialog-content {
	  display: block;
	}
</style>
